<template>
  <div class="all">
    <table class="tab1">
      <tr class="trs">
        <td class="title" colspan="6"><b>房屋登记薄 基本状况</b></td>
      </tr>
      <tr class="trs">
        <td class="td1">房屋编号：</td>
        <td class="td2" colspan="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ jbzkForm.roomNo }}</td>
      </tr>
      <tr class="trs">
        <td class="td1">房屋所有权人：</td>
        <td class="td2" colspan="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ jbzkForm.proposerName }}</td>
      </tr>
      <tr class="trs">
        <td class="td1">房屋坐落：</td>
        <td class="td2" colspan="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ jbzkForm.higherRoomRepose }}</td>
      </tr>
      <tr class="trs">
        <td class="td1">地丘号：</td>
        <td class="td3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ jbzkForm.higherMound }}</td>
        <td class="td1">业务宗号：</td>
        <td class="td3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ jbzkForm.businessNum }}</td>
        <td class="td1">建筑物总层数：</td>
        <td class="td3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ jbzkForm.floorAllno }}</td>
      </tr>
      <tr class="trs">
        <td class="td1">土地性质：</td>
        <td class="td3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ jbzkForm.higherLandNature }}</td>
        <td class="td1">建筑面积：</td>
        <td class="td3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ jbzkForm.floorArea }}</td>
        <td class="td1">规划用途：</td>
        <td class="td3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ jbzkForm.higherSpaces }}</td>
      </tr>
      <tr class="trs">
        <td class="td1">土地取得方式：</td>
        <td class="td3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ jbzkForm.higherSrcid }}</td>
        <td class="td1">套内建筑面积：</td>
        <td class="td3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ jbzkForm.roomArea }}</td>
        <td class="td1">房屋结构：</td>
        <td class="td3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ jbzkForm.higherBuildingStructure }}</td>
      </tr>
      <tr class="trs">
        <td class="td1">土地使用年限：</td>
        <td class="td3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ jbzkForm.higherUseyear }}</td>
        <td class="td1">分摊共有面积：</td>
        <td class="td3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ jbzkForm.roomCommonArea }}</td>
        <td class="td1">登记时间：</td>
        <td class="td3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ jbzkForm.registerTime }}</td>
      </tr>
      <tr class="trs">
        <td class="td1">土地证号：</td>
        <td class="td3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ jbzkForm.higherLandCardno }}</td>
        <td class="td1">专有部分面积：</td>
        <td class="td3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ jbzkForm.roomPropArea }}</td>
        <td class="td1">终审人/登薄人：</td>
        <td class="td3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ jbzkForm.aa }}</td>
      </tr>
      <tr class="trs">
        <td class="td1">附记：</td>
        <td class="td2" colspan="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ jbzkForm.excursus }}</td>
      </tr>
      <tr class="trs">
        <td class="td1">房地产平面图：</td>
        <td class="td2" colspan="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <!-- {{ jbzkForm.higherPlan }} -->
          <el-table :data="tableData" style="width: 100%; line-height: 0%">
            <template slot-scope="scope">
              <span style="margin-left: 0px">
                <img :src="scope.row.higherPlan" style="width: 60px; height: 60px" />
              </span>
            </template>
          </el-table>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      directoryId: sessionStorage.getItem("directoryId"),
      jbzkForm: {},
      tableData: [],
    };
  },
  methods: {
    loadJbzk() {
      this.$axios.post("/register-serv/directory/selJbzk/" + this.directoryId).then((res) => {
        this.jbzkForm = res.data.data.jbzkVO;
        this.tableData = res.data.data.jbzkVO;
      });
    },
  },
  mounted() {
    this.loadJbzk();
  },
};
</script>
<style scoped>
.all {
  border: 0px solid blue;
  width: 1200px;

}

.tab1 {
  border: 0px solid blue;
  height: 300px;
  width: 100%;
  border-collapse: collapse;
}

.title {
  border: 1px solid blue;
  width: 100%;
  font-size: 20px;
  height: 10px;
  align-content: center;
  line-height: 30%;
}

.trs {
  border: 0px solid blue;
  height: 10px;
  width: 100%;
  line-height: 0%;
}

.td1 {
  border: 1px solid blue;
  height: 10px;
  width: 11%;
  text-align: left;
}

.td2 {
  border: 1px solid blue;
  height: 10px;
  width: 80%;
  text-align: left;
  color: blue;
}

.td3 {
  border: 1px solid blue;
  height: 10px;
  width: 22%;
  text-align: left;
  color: blue;
}
</style>